<template>
  <div class="wrap">
    <div class="content">
      <div class="logo"></div>
      <div class="box" v-show="isLogin">
        <div class="form-title">登录</div>
        <div class="form-text-input">
          <label>
            <input type="text" v-model="username" placeholder="用户名">
          </label>
        </div>
        <div class="form-text-input">
          <label>
            <input type="password" v-model="password" placeholder="密码">
          </label>
        </div>
        <div class="form-check-input">
          <div class="check-left">
            <label>
              <input type="checkbox">下次自动登录
            </label>
          </div>
          <div class="check-right">
            <a href="#">忘记密码</a>
          </div>
        </div>
        <div class="form-button">
          <button type="button" @click="tryToLogin">登录</button>
        </div>
        <div class="form-jump">
          <span>还没有账号？</span><a @click="turnToRegister">马上注册</a>
        </div>
      </div>
      <div class="box" v-show="!isLogin">
        <div class="form-title">注册</div>
        <div class="form-text-input">
          <label>
            <input type="text" v-model="username" placeholder="用户名">
          </label>
        </div>
        <div class="form-text-input">
          <label>
            <input type="password" v-model="password" placeholder="密码">
          </label>
        </div>
        <div class="form-text-input">
          <label>
            <input type="password" v-model="passwordRepeat" placeholder="重复密码">
          </label>
        </div>
        <div class="form-button">
          <button type="button" @click="tryToRegister">注册</button>
        </div>
        <div class="form-jump">
          <span>已有账号？</span><a @click="turnToLogin">马上登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {login, register} from "@/http/api/user";
import response from "@/http/response";
import cookie from "js-cookie";

export default {
  name: "Login",
  data() {
    return {
      isLogin: true,
      username: '',
      password: '',
      passwordRepeat: ''
    }
  },
  methods: {

    // 尝试登录
    async tryToLogin() {

      // 检查信息完整性
      if (this.username === '' || this.password === '') {
        return this.$alert('请将信息填写完整', '提示', {
          confirmButtonText: '确定',
        })
      }

      // 获取登录返回信息
      let result = await login({
        username: this.username,
        password: this.password,
      })

      switch (result.code) {
        case response.success:
          this.$message.success("登录成功")
            cookie.set('userId', result.data)
            await this.$router.push('/user/shop')
          break
        case response.accountErr:
          // 用户名或密码错误
          this.$message({
            message: result.message,
            type: 'warning'
          })
          break
        default:
          this.$message.error('未知错误')
      }
    },

    // 尝试注册
    async tryToRegister() {

      // 检查信息完整性
      if (this.username === '' || this.password === '' || this.passwordRepeat === '') {
        return this.$alert('请将信息填写完整', '提示', {
          confirmButtonText: '确定',
        })
      }

      // 检查信息一致性
      if (this.password !== this.passwordRepeat) {
        return this.$alert('两次密码不一致', '提示', {
          confirmButtonText: '确定',
        })
      }

      // 获取注册返回信息
      let result = await register({
        username: this.username,
        password: this.password
      })

      switch (result.code) {
        case response.success:
          this.$message({
            message: '注册成功',
            type: 'success',
          })
          this.isLogin = true
          break
        case response.usernameExist:
          // 该用户名已被占用
          this.$message({
            message: result.message,
            type: 'warning',
          })
          break
        case response.serverErr:
          // 服务器异常
          this.$message.error(result.message)
          break
      }
    },

    // 转到注册界面
    turnToRegister() {
      this.isLogin = false
      this.password = ''
      this.passwordRepeat = ''
    },

    // 转到登录界面
    turnToLogin() {
      this.isLogin = true
      this.password = ''
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  background: url("../../assets/images/user/login/background.jpg") no-repeat center;
  background-size: 100%;

  .content {
    height: 737px;

    .logo {
      background: url("../../assets/images/user/login/logo.png") no-repeat center;
      width: 500px;
      height: 150px;
      margin: 0 auto;
    }

    .box {
      width: 360px;
      background: #FFF;
      margin: 0 auto;

      .form-title {
        font-size: 25px;
        text-align: center; // 字体居中
        color: #FF7F50;
        padding: 15px 0;
        width: 300px;
        margin: 0 auto;
        border-bottom: solid 1px #CCC;
      }

      .form-text-input {
        width: 300px;
        height: 40px;
        border: solid 1px #CCC;
        margin: 20px auto 0 auto;
        background: #FFF;

        input {
          width: 290px;
          height: 30px;
          margin: 5px;
          border: none;
          font-family: "微软雅黑", serif;
          font-size: 15px;
          color: #666;
          outline: medium none;
        }
      }

      .form-check-input {
        width: 300px;
        margin: 10px auto;
        overflow: hidden;

        .check-left {
          float: left;
          cursor: pointer;
          font-size: 13px;

          input {
            position: relative;
            top: 2px;
          }
        }

        .check-right {
          float: right;

          a {
            text-decoration: none;
            color: #3CF;
            font-size: 13px;
            -webkit-tap-highlight-color: transparent; // 设置点击链接时出现的高亮颜色
          }
        }
      }

      .form-button {
        width: 300px;
        height: 40px;
        margin: 10px auto;

        button {
          width: 100%;
          height: 100%;
          border: none;
          color: #FFF;
          font-size: 14px;
          background: #FF7F50;
          cursor: pointer;
        }
      }

      .form-jump {
        width: 300px;
        margin: 0 auto;
        padding-bottom: 30px;
        font-size: 14px;

        span {
          color: #333;
        }

        a {
          text-decoration: none;
          color: #3CF;
          font-size: 14px;
          -webkit-tap-highlight-color: transparent;
          cursor: pointer;
        }
      }
    }
  }
}
</style>